<template>
	<view class="container">
		<view class="dflex-c pos-r margin-bottom margin-top">
			<view class="portrait-box" @click="showAuthorizationModal = true" style="position: relative;">
				<view style="position: absolute;top: 30%;text-align: center;width: 100%;">更换头像</view>
				<image class="border-radius-c" :src="personInfo.avatar || '/static/images/user/default.png'">
				</image>
			</view>
		</view>

		<view class="use-item padding-lr dflex-b">
			<text class="tac">账号</text>
			<text>{{ personInfo.userName || "用户未登录" }}</text>
		</view>
		<view class="gap"></view>
		<view class="use-item padding-lr dflex-b">
			<text class="tac">昵称</text>
			<text>{{ personInfo.nickName || personInfo.userName || "用户名未获取" }}</text>
		</view>

		<view class="use-item padding-lr dflex-b">
			<text class="tac">余额</text>
			<text>￥{{ personInfo.totals || "0.00" }}</text>
		</view>


		<!-- 	
		<view class="use-item padding-lr dflex-b">
			<text class="tac">性别</text>
			<text>{{ (personInfo.member_gender == 0 ? '未知' : personInfo.member_gender == 1 ? '女' : '男') || '未知' }}</text>
		</view> -->

		<wx-user-info-modal v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></wx-user-info-modal>
	</view>
</template>

<script>
	import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue';
	import {
		updateUsersApi,
		uploadApi,
		queryUserBalanceApi,
	} from "@/api/user.js";
	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			WxUserInfoModal
		},
		computed: {
			...mapState(['islogin', 'member'])
		},
		data() {
			return {
				showAuthorizationModal: false,
				personInfo: {},
			};
		},
		onShow() {
			if (!this.islogin) {
				this.$api.msg('账号未登录');
				return;
			}
			this.personInfo = this.member;
			this.getUserBalanceFunc();
			console.log(this.personInfo, "<=== this.personInfo");
		},
		methods: {
			async updatedUserInfoEvent(info) {
				console.log(info, "<===== info");
				this.personInfo.avatar = info?.avatar ?? "";
				this.personInfo.nickName = info?.nickname ?? "";
				this.showAuthorizationModal = false;
				const avatarURL = await this.SavaUploadAvatar(this.personInfo.avatar);

				const response = await updateUsersApi({
					id: this.personInfo.id,
					nickName: this.personInfo.nickName,
					avatar: avatarURL,
				}).catch(() => {});
				console.log(response, ",==== response")

				if (response?.code == 200) {
					this.$api.alert('修改成功');
					return;
				} else {
					this.$api.msg(response?.msg ?? "服务器繁忙，请稍后再试");
				}

			},
			
			//查询用户余额
			async getUserBalanceFunc(){
				const response = await queryUserBalanceApi({
					id: this.member.id,
				}).catch(()=>{});
				if(response?.code == 200){
					this.personInfo.totals = response?.data?.records?.totals ?? 0;
				}else {
					this.$api.msg(response?.msg ?? "服务器繁忙，请稍后再试")
				}
			},
			
			// 保存头像
			SavaUploadAvatar(avatarUrl) {
				return new Promise((resolve, reject) => {
					wx.downloadFile({
						url: avatarUrl,
						success(res) {
							if (res.statusCode === 200) {
								const tempFilePath = res.tempFilePath;
								wx.uploadFile({
									url: 'http://127.0.0.1:7001/tube/admin/upload',
									filePath: tempFilePath,
									name: 'file',
									success(response) {
										console.log(response.data, "<==== response");
										const _response = JSON.parse(response?.data ?? '{}')
										if (_response?.code === 200) {
											resolve(_response?.data ?? "");
										} else {
											this.$api.msg(_response?.msg ?? "服务器繁忙，请稍后再试");
											reject();
										}
									},
									fail(res) {
										console.log('upload fail');
										reject();
									}
								})
							}
						}
					});
				})
			},


		}
	}
</script>

<style lang='scss'>
	page {
		background: $page-color-base;
	}

	image {
		width: 130rpx;
		height: 130rpx;
	}

	.use-item {
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		background: #fff;
	}
</style>